﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <link rel="stylesheet" href="~/lib/layui/css/layui.css">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->

</head>
<body>
    <div>注：数据来源于:<a href="http://124.222.78.73:8080">http://124.222.78.73:8080</a>   站点留言</div>
    <table class="layui-hide" id="test"></table>
    <script src="~/lib/layui/layui.js" charset="utf-8"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

    <script>
        layui.use('table', function () {
            var table = layui.table;

            table.render({
                elem: '#test'
                , url: '/api/liuyan/liuyan'
                , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    , layEvent: 'LAYTABLE_TIPS'
                    , icon: 'layui-icon-tips'
                }]
                , cols: [[
                    { field: 'id', title: 'ID', sort: true }
                    , { field: 'firstName', title: '名字' }
                    , { field: 'lastName', title: '内容', sort: true }
                    , { field: 'createdAt', title: '时间' }

                ]]
                //加分页功能
                , page: true
                , limits: [10, 20, 50]  //一页选择显示3,5或10条数据
                , limit: 10  //一页显示10条数据
                , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
                    var result;
                    console.log(this);
                    console.log(JSON.stringify(res));
                    if (this.page.curr) {
                        result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                    }
                    else {
                        result = res.data.slice(0, this.limit);
                    }
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.count, //解析数据长度
                        "data": result //解析数据列表
                    };
                }
            });
        });
    </script>

</body>
</html>